﻿<!DOCTYPE html>
<html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>数据导出</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/res/layui/css/layui.css" media="all">
    <style>
        body {
            margin: 10px;
        }

        .layui-table-tool-temp {
            padding-right: 0;
            margin-right: 0;
            /*text-align: right;*/
        }

        .yutons,
        .layui-btn-sm {
            margin-top: -2px;
        }

        /* 修改头部工具右侧筛选、导出、打印样式 */
        .yutons-header-tool {
            margin-top: -2px;
            width: 30px !important;
            height: 30px !important;
            background-color: #ffffff;
        }

        /* 修改右侧筛选、导出、打印出发的ul标签定位 */
        .layui-table-tool-panel {
            left: auto;
            right: -1px;
        }

        /* div 右侧10px */
        .yutons-btn-margin-right {
            margin-right: 10px;
            line-height: 40px;
        }
    </style>
</head>
<body>
<!--数据表格-->
<table class="layui-hide" id="demo" lay-filter="test"></table>
<script type="text/html" id="toolbarDemo">
    <div class="layui-row">
        <div class="layui-col-md2 layui-col-sm3 layui-col-xs6" style="text-align: left;padding-left: 10px;">
            <div class="layui-input-inline yutons-btn-margin-right">
                <span class="layui-btn yutons layui-btn-sm yutons-color-detail" lay-event="table_export">导出</span>
            </div>
        </div>
        <div class="layui-col-md10 layui-col-sm9 layui-col-xs6" style="text-align: right;">

            <div class="layui-input-inline yutons-btn-margin-right" style="margin-right: 0px;">
				<span class="layui-inline yutons-header-tool" title="筛选列" lay-event="LAYTABLE_COLS">
							<i class="layui-icon layui-icon-cols"></i></span>
                <span class="layui-inline yutons-header-tool" title="导出" lay-event="table_export">
				                    <i class="layui-icon layui-icon-export"></i></span>
                <span class="layui-inline yutons-header-tool" title="打印" lay-event="LAYTABLE_PRINT">
							<i class="layui-icon layui-icon-print"></i>
				</span>
            </div>
        </div>
    </div>
</script>
<!--js逻辑-->
<script src="/res/layui/layui.js"></script>
<script th:inline="javascript">
    layui.config({
        base: '/res/layui_exts/'
    }).use(['table', 'excel'], function() {
        var table = layui.table //表格
            ,
            $ = layui.$,
            excel = layui.excel;
           var name = [[${url}]];

        //执行一个 table 实例
        table.render({
            elem: '#demo',
            url: '/data/imdata?name='+name, //数据接口
            title: '新闻表',
            page: true, //开启分页
            limit: 10,
            size: "lg",
            toolbar: '#toolbarDemo', //操作1:启用自定义模板表格头部工具栏
            defaultToolbar: [], //操作2:隐藏头部工具栏右侧的图标
            cols: [
                [ //表头
                    {field: "id", title: "编号", align: "center",sort: true},
                    {field: "title", title: "标题",align: "center"},
                    {field: "content", title: "内容",align: "center"},
                    {field: "keyword", title: "关键词",align: "center"},
                    {field: "source", title: "来源",align: "center"},
                    {field: "country", title: "国家", align: "center"},
                    {field: "time", title: "时间", align: "center"},
                    {field: "url", title: "url", align: "center"}
                ]
            ]
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id),
                data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case 'table_export':
                    exportFile('demo')
                    break;
            };
        });

        /**
         * by yutons
         * Array.from() 非常方便的将一个类数组的集合 ==》 数组，直接使用数组身上的方法。例如：常用的map，foreach…
         * 但是，问题来了，IE不识别Array.from这个方法。所以写了它兼容IE的写法。
         */
        if (!Array.from) {
            Array.from = function(el) {
                return Array.apply(this, el);
            }
        }
        //表格导出
        function exportFile(id) {
            //根据传入tableID获取表头
            var headers = $("div[lay-id=" + id + "] .layui-table-box table").get(0);
            var htrs = Array.from(headers.querySelectorAll('tr'));
            var titles = {};
            for (var j = 0; j < htrs.length; j++) {
                var hths = Array.from(htrs[j].querySelectorAll("th"));
                for (var i = 0; i < hths.length; i++) {
                    var clazz = hths[i].getAttributeNode('class').value;
                    if (clazz != ' layui-table-col-special' && clazz != 'layui-hide') {
                        //排除居左、具有、隐藏字段
                        //修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题
                        titles['data-field' + i] = hths[i].innerText;
                    }
                }
            }
            //根据传入tableID获取table内容
            var bodys = $("div[lay-id=" + id + "] .layui-table-box table").get(1);
            var btrs = Array.from(bodys.querySelectorAll("tr"))
            var bodysArr = new Array();
            for (var j = 0; j < btrs.length; j++) {
                var contents = {};
                var btds = Array.from(btrs[j].querySelectorAll("td"));
                for (var i = 0; i < btds.length; i++) {
                    for (var key in titles) {
                        //修改:默认字段data-field+i,兼容部分数据表格中不存在data-field值的问题
                        var field = 'data-field' + i;
                        if (field === key) {
                            //根据表头字段获取table内容字段
                            contents[field] = btds[i].innerText;
                        }
                    }
                }
                bodysArr.push(contents)
            }
            //将标题行置顶添加到数组
            bodysArr.unshift(titles);
            //导出excel
            excel.exportExcel({
                sheet1: bodysArr
            }, '新闻表' + new Date().toLocaleString() + '.xlsx', 'xlsx');
        }
    });
</script>
</body>
</html>
